// import { useState } from 'react'
// import { useDrag } from 'react-dnd'

type Props = {
  leftText?: string
  rightText?: string
  backgroundColor?: string
  textColor?: string
  borderRadius?: number
  fontSize?: number
  width?: number
  height?: number
  x?: number
  y?: number
}

export default function Capsule(props: Props) {
  const {
    leftText = '微信',
    rightText = '···',
    backgroundColor = 'rgba(0,0,0,0.6)',
    textColor = '#fff',
    borderRadius = 18,
    fontSize = 12,
    width = 92,
    height = 32,
    x = 281,
    y = 8,
  } = props

  //   const [editing, setEditing] = useState(false);

  //   const [{ isDragging }, drag] = useDrag({
  //     type: 'wechatCapsule',
  //     item: { type: 'wechatCapsule' },
  //     collect: monitor => ({ isDragging: monitor.isDragging() }),
  //   });

  return (
    <div
      // ref={drag}
      // onDoubleClick={() => setEditing(true)}
      style={{
        border: '1px solid #ccc',
        position: 'absolute',
        left: x,
        top: y,
        width,
        height,
        backgroundColor,
        borderRadius,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        padding: '0 10px',
        fontSize,
        color: textColor,
        cursor: 'move',
        // opacity: isDragging ? 0.4 : 1,
      }}
    >
      {/* 左侧文字 */}
      <span
        suppressContentEditableWarning
        // contentEditable={editing}
        // onBlur={e => {
        //   // setEditing(false)
        //   onChange({ ...props, leftText: e.currentTarget.textContent })
        // }}
      >
        {leftText}
      </span>

      {/* 竖线 */}
      <div style={{ width: 1, height: 14, background: textColor, opacity: 0.25 }} />

      {/* 右侧更多图标 */}
      <span>{rightText}</span>
    </div>
  )
}
